<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>便捷工具合集 - 您的全能工具箱</title>
        <link rel="icon" href="faviconlogo.ico">

        <link
            rel="stylesheet"
            href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        />
        <link rel="stylesheet" href="css/comments.css" />
        <link rel="stylesheet" href="css/styles.css" />
    </head>
    <body>
       <!-- 导航栏代码 -->
<nav class="navbar">
    <div class="logo no-wrap">
        <i class="fas fa-toolbox"></i>
        <span>便捷工具合集</span>
    </div>
    <div class="nav-container">
        <ul class="nav-links">
            <li><a href="index.html" class="nav-item no-wrap">首页</a></li>
            <li><a href="calculator.html" class="nav-item no-wrap">计算工具</a></li>
            <li><a href="image-processing.html" class="nav-item no-wrap">图像处理</a></li>
            <li><a href="dev-tools.html" class="nav-item no-wrap">开发工具</a></li>
            <li><a href="life-tools.html" class="nav-item no-wrap">生活工具</a></li>
            <li><a href="404.html" class="nav-item no-wrap">API工具</a></li>
        </ul>
        <div class="nav-actions">
            <button id="sidebarToggle" class="btn mobile-menu-btn">
                <i class="fas fa-bars no-wrap"></i>
            </button>
            <li id="userInfo" style="display: none">
                <span class="username"></span>
                <button onclick="logout()" class="btn logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                </button>
            </li>
            <li id="login">
                <a href="login.html" class="nav-item active no-wrap login-link"
                    ><i class="fas fa-sign-in-alt"></i>登录</a
                >
            </li>
        </div>
    </div>
</nav>
        <!-- 主内容区 -->
        <div class="container">
            <!-- 轮播图 -->
            <div class="carousel">
                <div class="carousel-inner" id="carouselInner">
                    <div
                        class="carousel-item"
                        style="
                            background-image: linear-gradient(
                                    rgba(0, 0, 0, 0.3),
                                    rgba(0, 0, 0, 0.3)
                                ),
                                url(photo/p1.jpg);
                        "
                    >
                        <div class="carousel-caption">
                            <h2>全能工具箱，满足您的所有需求</h2>
                            <p>超过50种实用工具，免费在线使用</p>
                        </div>
                    </div>
                    <div
                        class="carousel-item"
                        style="
                            background-image: linear-gradient(
                                    rgba(0, 0, 0, 0.3),
                                    rgba(0, 0, 0, 0.3)
                                ),
                                url(photo/p2.jpg);
                        "
                    >
                        <div class="carousel-caption">
                            <h2>开发者必备工具集合</h2>
                            <p>编码、调试、格式化一站式解决</p>
                        </div>
                    </div>
                    <div
                        class="carousel-item"
                        style="
                            background-image: linear-gradient(
                                    rgba(0, 0, 0, 0.3),
                                    rgba(0, 0, 0, 0.3)
                                ),
                                url(photo/p3.jpg); 
                        "        
                    >
                    
                        <div class="carousel-caption">
                            <h2>图像处理工具新上线</h2>
                            <p>压缩、转换、编辑功能一应俱全</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-controls">
                    <button class="carousel-btn active" data-index="0"></button>
                    <button class="carousel-btn" data-index="1"></button>
                    <button class="carousel-btn" data-index="2"></button>
                </div>
            </div>

            <!-- 无缝滚动通知 -->
            <div class="ticker-container">
                <div class="ticker">
                    <div class="ticker-item">
                        <i class="fas fa-bell"></i>
                        新功能上线：JSON格式化工具已发布
                    </div>
                    <div class="ticker-item">
                        <i class="fas fa-bell"></i>
                        系统维护通知：本周六凌晨2-4点进行系统升级
                    </div>
                    <div class="ticker-item">
                        <i class="fas fa-bell"></i>
                        新增天气API工具，支持全球城市查询
                    </div>
                    <div class="ticker-item">
                        <i class="fas fa-bell"></i> 用户反馈有奖活动进行中
                    </div>
                </div>
            </div>

            <!-- 广告栏 -->
            <div class="ad-banner" id="adBanner">
                <button class="close-ad" id="closeAd">
                    <i class="fas fa-times"></i>
                </button>
                <h3>高级会员限时优惠</h3>
                <p>
                    开通高级会员，享受无广告、更多工具、云存储等特权，首月仅需9.9元！
                </p>
                <button class="btn" style="margin-top: 10px">
                    <a
                        href="404.html"
                        style="text-decoration: none; color: white"
                        >立即开通</a
                    >
                </button>
            </div>

            <!-- 热门工具区 -->
            <div class="section">
                <h2 class="section-title">
                    <i class="fas fa-fire"></i> 热门工具
                </h2>
                <div class="tools-grid">
                    <div class="tool-card">
                        <div class="tool-icon">
                            <i class="fas fa-calculator"></i>
                        </div>
                        <div class="tool-content">
                            <h3>科学计算器</h3>
                            <p>高级科学计算器，支持复杂公式和函数计算</p>
                            <a href="calculator.html" class="btn">立即使用</a>
                        </div>
                    </div>
                    <div class="tool-card">
                        <div class="tool-icon">
                            <i class="fas fa-code"></i>
                        </div>
                        <div class="tool-content">
                            <h3>代码格式化</h3>
                            <p>支持HTML、CSS、JavaScript等代码格式化</p>
                            <a href="dev-tools.html" class="btn">立即使用</a>
                        </div>
                    </div>
                    <div class="tool-card">
                        <div class="tool-icon">
                            <i class="fas fa-compress-arrows-alt"></i>
                        </div>
                        <div class="tool-content">
                            <h3>图片编辑</h3>
                            <p>在线编辑图片，简易的图片编辑器</p>
                            <a href="image-processing.html" class="btn"
                                >立即使用</a
                            >
                        </div>
                    </div>
                </div>
            </div>

            <!-- API工具区 -->
            <div class="section">
                <h2 class="section-title">
                    <i class="fas fa-plug"></i> API工具
                </h2>

                <!-- 选项卡 -->
                <div class="tabs">
                    <div class="tab-header">
                        <button class="tab-btn active" data-tab="weather">
                            天气查询
                        </button>
                        <button class="tab-btn" data-tab="map">地图服务</button>
                        <button class="tab-btn" data-tab="currency">
                            汇率转换
                        </button>
                    </div>
                    <div class="tab-content">
                        <!-- 天气查询 -->
                        <div class="tab-pane active" id="weatherTab">
                            <div class="form-group">
                                <label for="cityInput">输入城市名称：</label>
                                <input
                                    type="text"
                                    id="cityInput"
                                    class="form-control"
                                    placeholder="例如：北京"
                                />
                                <div class="error-message" id="cityError">
                                    请输入有效的城市名称
                                </div>
                            </div>
                            <button id="getWeather" class="btn">
                                获取天气
                            </button>

                            <div
                                class="weather-card"
                                id="weatherResult"
                                style="display: none; margin-top: 1.5rem"
                            >
                                <h3 id="cityName">北京市</h3>
                                <div class="temp">
                                    <span id="temperature">25</span>°C
                                </div>
                                <p id="weatherDesc">晴天</p>
                                <div class="weather-details">
                                    <div class="weather-detail">
                                        <i class="fas fa-wind"></i>
                                        <span>风速</span>
                                        <strong id="windSpeed">5.2 km/h</strong>
                                    </div>
                                    <div class="weather-detail">
                                        <i class="fas fa-tint"></i>
                                        <span>湿度</span>
                                        <strong id="humidity">65%</strong>
                                    </div>
                                    <div class="weather-detail">
                                        <i class="fas fa-sun"></i>
                                        <span>日出</span>
                                        <strong id="sunrise">06:12</strong>
                                    </div>
                                    <div class="weather-detail">
                                        <i class="fas fa-moon"></i>
                                        <span>日落</span>
                                        <strong id="sunset">18:45</strong>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 地图服务 -->
                        <div class="tab-pane" id="mapTab">
                            <div id="map"></div>
                        </div>

                        <!-- 汇率转换 -->
                        <div class="tab-pane" id="currencyTab">
                            <div class="form-group">
                                <label for="amount">金额：</label>
                                <input
                                    type="number"
                                    id="amount"
                                    class="form-control"
                                    placeholder="输入金额"
                                    value="100"
                                />
                            </div>

                            <div
                                style="
                                    display: flex;
                                    gap: 1rem;
                                    margin-bottom: 1.5rem;
                                "
                            >
                                <div style="flex: 1">
                                    <label for="fromCurrency">从：</label>
                                    <select
                                        id="fromCurrency"
                                        class="form-control"
                                    >
                                        <option value="USD">美元 (USD)</option>
                                        <option value="CNY" selected>
                                            人民币 (CNY)
                                        </option>
                                        <option value="EUR">欧元 (EUR)</option>
                                        <option value="JPY">日元 (JPY)</option>
                                        <option value="GBP">英镑 (GBP)</option>
                                    </select>
                                </div>
                                <div style="flex: 1">
                                    <label for="toCurrency">到：</label>
                                    <select
                                        id="toCurrency"
                                        class="form-control"
                                    >
                                        <option value="USD" selected>
                                            美元 (USD)
                                        </option>
                                        <option value="CNY">
                                            人民币 (CNY)
                                        </option>
                                        <option value="EUR">欧元 (EUR)</option>
                                        <option value="JPY">日元 (JPY)</option>
                                        <option value="GBP">英镑 (GBP)</option>
                                    </select>
                                </div>
                            </div>

                            <button id="convertCurrency" class="btn">
                                转换
                            </button>

                            <div
                                id="conversionResult"
                                style="
                                    margin-top: 1.5rem;
                                    font-size: 1.2rem;
                                    text-align: center;
                                    display: none;
                                "
                            >
                                <p>
                                    <span id="fromAmount">100</span>
                                    <span id="fromCurrencyText">CNY</span> =
                                </p>
                                <h3>
                                    <span id="convertedAmount">14.62</span>
                                    <span id="toCurrencyText">USD</span>
                                </h3>
                                <p
                                    style="
                                        font-size: 0.9rem;
                                        color: var(--gray);
                                    "
                                >
                                    汇率更新时间:
                                    <span id="updateTime"
                                        >2023-10-15 14:30</span
                                    >
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 媒体控制区
            <div class="section">
                <h2 class="section-title">
                    <i class="fas fa-play-circle"></i> 媒体控制
                </h2>
                <div class="media-section">
                    <div class="media-player">
                        <div class="media-header">
                            <i class="fas fa-music"></i>
                            <h3>背景音乐</h3>
                        </div>
                        <div class="media-controls">
                            <div class="progress-container" id="musicProgress">
                                <div class="progress-bar" id="musicBar"></div>
                            </div>
                            <div class="control-buttons">
                                <button class="control-btn" id="prevBtn">
                                    <i class="fas fa-step-backward"></i>
                                </button>
                                <button class="control-btn" id="playBtn">
                                    <i class="fas fa-play"></i>
                                </button>
                                <button class="control-btn" id="nextBtn">
                                    <i class="fas fa-step-forward"></i>
                                </button>
                                <button class="control-btn" id="volumeBtn">
                                    <i class="fas fa-volume-up"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="media-player">
                        <div class="media-header">
                            <i class="fas fa-video"></i>
                            <h3>视频教程</h3>
                        </div>
                        <div class="media-controls">
                            <video id="tutorialVideo" width="100%" controls>
                                <source
                                    src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
                                    type="video/mp4"
                                />
                                您的浏览器不支持视频标签。
                            </video>
                            <div
                                style="
                                    display: flex;
                                    gap: 1rem;
                                    margin-top: 1rem;
                                "
                            >
                                <button id="playVideo" class="btn">
                                    <i class="fas fa-play"></i> 播放
                                </button>
                                <button id="pauseVideo" class="btn">
                                    <i class="fas fa-pause"></i> 暂停
                                </button>
                                <button id="fullscreenBtn" class="btn">
                                    <i class="fas fa-expand"></i> 全屏
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->

            <!-- 留言板 -->
            <div class="section">
                <h2 class="section-title">
                    <i class="fas fa-comments"></i> 用户留言板
                </h2>

                <div id="messageBoard" style="margin-top: 2rem">
                    <h3>最新留言</h3>
                    <div id="messagesContainer" style="margin-top: 1rem"></div>
                    <div id="page">
                        <div id="view"></div>
                        <div id="enter">
                            <input
                                type="text"
                                placeholder="输入你想发送的弹幕"
                                id="text"
                                class="form-control"
                            />
                            <input type="color" id="color" />
                            <button id="sendBtn" class="btn">发送</button>
                            <script src="js/comments.js" type="module"></script>
                        </div>
                    </div>
                </div>
            </div>
        </div>

     <!-- 页脚 -->
<footer>
    <div class="footer-content">
        <div class="footer-column">
            <h3>在线工具合集</h3>
            <p>提供全面实用的在线工具，助力高效完成各类任务。</p>
            <div class="social-links" style="display: flex; gap: 1rem; margin-top: 1rem">
                <a href="#" style="color: white"><i class="fab fa-facebook fa-lg"></i></a>
                <a href="#" style="color: white"><i class="fab fa-twitter fa-lg"></i></a>
                <a href="#" style="color: white"><i class="fab fa-instagram fa-lg"></i></a>
                <a href="#" style="color: white"><i class="fab fa-github fa-lg"></i></a>
            </div>
        </div>

        <div class="footer-column">
            <h3>工具分类</h3>
            <ul class="footer-links">
                <li><a href="calculator.html"><i class="fas fa-calculator"></i> 计算工具</a></li>
                <li><a href="image-processing.html"><i class="fas fa-image"></i> 图像处理</a></li>
                <li><a href="dev-tools.html"><i class="fas fa-code"></i> 开发工具</a></li>
                <li><a href="life-tools.html"><i class="fas fa-clock"></i> 生活工具</a></li>
                <li><a href="edu-tools.html"><i class="fas fa-book"></i> 教育工具</a></li>
            </ul>
        </div>

        <div class="footer-column">
            <h3>帮助中心</h3>
            <ul class="footer-links">
                <li><a href="#" ><i class="fas fa-question-circle"></i> 常见问题</a></li>
                <li><a href="#" ><i class="fas fa-play-circle"></i> 使用教程</a></li>
                <li><a href="#" ><i class="fas fa-comment"></i> 意见反馈</a></li>
                <li><a href="about.html"><i class="fas fa-envelope"></i> 联系我们</a></li>
            </ul>
        </div>

        <div class="footer-column">
            <h3>订阅更新</h3>
            <p>获取最新工具和功能更新</p>
            <div class="subscribe-form">
                <div class="input-group">
                    <input type="email" placeholder="您的邮箱" class="form-control" />
                    <button class="btn btn-primary">订阅</button>
                </div>
            </div>
        </div>
    </div>

    <div class="copyright">
        <p>&copy; 2025 在线工具合集 - 个人开发者保留所有权利</p>
    </div>
</footer>

        <!-- 引入Leaflet地图库 -->
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
        <script src="js/common.js"></script>
        <script src="js/index.js"></script>
        <script src="js/left.js"></script>
    </body>
</html>
